import React from 'react'
import {Button, Modal} from 'antd';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import {synStoreGoodsByGoodsId, storeInfoListPage} from '@/request/storeBackManage/goodsManage/centerGoodsList'

export default class SelfSupportShopTable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            goodsId: [],
            selectedRowKeys: [],
            columns: [
                {
                    title: "店铺ID",
                    dataIndex: "storeId",
                    key: "storeId",
                },
                {
                    title: "类型",
                    dataIndex: "businessCategory",
                    key: "businessCategory",
                    render: (text) => {
                        let label = ''
                        switch (text) {
                            case '0':
                                label = '实体门店'
                                break
                            case '1':
                                label = '酒店'
                                break
                            case '2':
                                label = '医院'
                                break
                            case '3':
                                label = '上门服务'
                                break
                            case '4':
                                label = '线上店铺'
                                break
                        }
                        return label
                    }
                },
                {
                    title: "店铺名称",
                    dataIndex: "storeName",
                    key: "storeName",
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            total: 1,
            loading: false,
            isModal: false,
        }
    }

    // 获取数据
    getData = async (values) => {
        let res = await storeInfoListPage({synchStatus: 1, ...this.state.pageData})
        if (res.code === 0 && res.data) {
            this.setState({
                dataSource: res.data,
                // selectedRowKeys: [],
                pageData: {pageNo: res.pageNo, pageSize: res.pageSize},
                total: res.totalCount
            })
        }

    }
    // 自营门店切换分页
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {pageNo, pageSize}
        }, () => {
            this.getData()
        })
    };
    // 自营门店表格多选框选择
    onSelect = (selected) => {
        this.setState({
            selectedRowKeys: selected,
        })
    }
    synchronousGoods = (id) => {
        if (id && id.length > 0) {
            this.setState({
                isModal: true,
                goodsId: id,
                selectedRowKeys: [],
                pageData: {
                    pageNo: 1,
                    pageSize: 10
                },
                total: 1,
            }, () => {
                this.getData()
            })
        } else {
            React.$message({type: 'warning', content: '请至少选择一个店铺！'})
        }
    }
    // 取消
    handleCancel = () => {
        this.setState({
            selectedRowKeys: [],
            isModal: false
        })
    }
    // 确定
    submitSynchronousGoods = async () => {
        if (this.state.selectedRowKeys.length === 0) {
            React.$message({type: 'info', content: '请至少选择一个店铺！'})
        } else {
            let res = await synStoreGoodsByGoodsId({goodsIds: this.state.goodsId, storeIds: this.state.selectedRowKeys})
            if (res.code === 0) {
                this.setState({isModal: false})
                this.props.submit()
                React.$message({type: 'success', content: '同步成功，请在商品库中补全商品信息'})
            }
        }

    }

    render() {
        let {columns, dataSource, pageData: {pageNo, pageSize}, total, selectedRowKeys, isModal, loading} = this.state
        const rowSelection = {
          selectedRowKeys,
          onChange: this.onSelect,
          preserveSelectedRowKeys: true
        };
        return (
            <>
                <Modal
                    title="同步商品"
                    width={'50%'}
                    visible={isModal}
                    onCancel={this.handleCancel}
                    footer={[
                    <Button key="back" onClick={this.handleCancel}>
                        取消
                    </Button>,
                    <Button key="submit" type="primary" loading={loading} onClick={this.submitSynchronousGoods}>
                        同步
                    </Button>]}
                >
                    <div style={{marginBottom: 10}}>请选择需要同步的自营门店</div>
                    <TheTable
                        scroll={{x: "max-content", y: '61vh'}}
                        columns={columns}
                        dataSource={dataSource}
                        rowKey={'storeId'}
                        rowSelection={rowSelection}
                    />
                    <ThePagination
                        pageNo={pageNo}
                        pageSize={pageSize}
                        total={total}
                        pageChange={this.pageChange}
                    />
                </Modal>
            </>
        )
    }
}
